Every Layout
CSSの方法論
具体的な実装を最小限に抑えることで、堅牢性と一貫性を実現する
本の内容が割と書かれている
より普遍的なルールに基づいて設計する
例えば、
明示的なmarginは書かない
px単位で指定しない
@mediaでの条件分岐はしない
基本的にこれの組み合わせだけでlayoutを定義する
CSSでは意図のみを書いて、実際の見た目の裁量はブラウザに委ねる
結果を書くのではなく、意図を記述する
実際にどういう見た目にするかの裁量はBrowserに委ねる
制作者による個々の場面での判断を徹底的に排除する
CSSは、個別最適を求めれば求めるほど、
構造は複雑化する
それに対処するために場当たり的なルールを増やすことになる
運用コストは増加する
自分の首を絞める事になる
なのでそうしない。
参考
pxに依存しない
デバイスによってpxの意味するものは変わるし、拡大してても変わる
mediaqueryを使うと、どこかの1pxの差で表示が大きく変わる点が生じる
この離散的な変更は恣意的なものであり、本来表現したいものとは違うはず
相対的な値を使う
utility class
code:例.css
.font-size\:base {
font-size: var(--font-size-base) !important;
}
CSSのproperty nameと全く同じ名前のclass名にする
e.g. text-align: centerなら、.font-size:centerのように
class名に、意味を内包させる
:で連結させる命名らしい
!impotantを付けて詳細度を最大化する
最終調整のものなので、こうする
!importantを推進する系の設計初めて見たなmrsekut.icon
必要になるまで追加しない
こういう段階がある？
global、一般的なstyle
継承を含む
utility class